import { Image, Text, View } from "@tarojs/components";
import { AtAvatar, AtCard, AtIcon, AtTag } from "taro-ui";

definePageConfig({
  navigationBarTitleText: "招募",
  navigationBarTextStyle: "white",
  navigationStyle: "custom",
});

const types = ["角色扮演", "动作", "冒险", "策略", "模拟", "体育", "其他"];

export default function Recruit() {
  return (
    <View className="relative">
      <View className="sticky top-0 z-10 w-full flex flex-col gap-4 pt-10 pb-4 bg-gradient-to-tl from-primary to-primary-active rounded-b-2xl">
        <View className="flex items-stretch gap-4 px-4">
          <AtAvatar circle />
          <View className="flex flex-col justify-between text-white py-1">
            <Text className="text-lg font-bold">混吃不等死的菜鸡</Text>
            <Text className="text-xs opacity-70">策划</Text>
          </View>
        </View>
        <View className="flex gap-2 px-4 text-white">
          <AtIcon value="arrow-down" className="!text-xs" />
          <Text className="text-xs opacity-70">
            选择一个你心仪的类型，开始你的冒险之旅吧！
          </Text>
        </View>
        <View className="overflow-x-auto">
          <View className="space-x-2 whitespace-nowrap px-4">
            {types.map((type) => (
              <View
                key={type}
                className="inline-block px-4 py-2 rounded-full text-sm text-white bg-primary-light"
              >
                {type}
              </View>
            ))}
          </View>
        </View>
      </View>
      <View className="space-y-4 before:content-[''] before:block before:pt-4">
        <AtCard>
          <View className="relative h-16">
            <Image
              className="w-full h-full"
              mode="aspectFill"
              src="https://xiazai-fd.zol-img.com.cn/g6/M00/0C/06/ChMkKmCLoiCIfM1lAAJzTI6rbcYAAODwwAt08EAAnNk044.jpg"
            />
            <View className="absolute top-0 bottom-0 left-0 right-0 flex flex-col">
              <View className="absolute w-full h-full bg-black opacity-30" />
              <Text className="relative text-xl font-bold text-white px-4 pt-2">
                分类宝宝总动员
              </Text>
              <View className="relative px-4 pb-2 space-x-2 whitespace-nowrap">
                <AtTag size="small">休闲</AtTag>
              </View>
            </View>
          </View>
          <View className="mt-2 mx-2 p-2 rounded-lg bg-background">
            <Text className="text-xs opacity-70">
              融合策略防御、城市建设和资源管理，打破传统塔防游戏框架，带来全新体验
            </Text>
          </View>
          <View className="px-4 py-2 flex gap-2 text-xs opacity-90">
            <Text className="pr-4 text-xs">空缺岗位</Text>
            <View className="flex-1" />
            <Text>已立项</Text>
            <Text>团队规模 7/10</Text>
          </View>
          <View className="overflow-x-auto max-w-full">
            <View className="px-4 space-x-2 whitespace-nowrap">
              <AtTag size="small" active>
                程序 * 1
              </AtTag>
              <AtTag size="small" active>
                美术 * 2
              </AtTag>
            </View>
          </View>
          <View className="flex items-center h-12 gap-4 px-4 py-2">
            <AtAvatar circle className="!w-6 !h-6" />
            <View className="flex flex-col justify-between py-1">
              <Text className="text-xs font-bold">混吃不等死的菜鸡</Text>
              <Text className="text-xs opacity-70">策划</Text>
            </View>
            <View className="flex-1" />
            <View className="flex flex-col h-full justify-end">
              <View className="flex items-center gap-1">
                <AtIcon
                  prefixClass="fa"
                  value="map-marker"
                  size={13}
                  className="opacity-70"
                />
                <Text className="text-xs opacity-70">成都</Text>
              </View>
            </View>
          </View>
        </AtCard>
      </View>
      <View className="space-y-4 before:content-[''] before:block before:pt-4">
        <AtCard>
          <View className="relative h-16">
            <Image
              className="w-full h-full"
              mode="aspectFill"
              src="https://xiazai-fd.zol-img.com.cn/g6/M00/0C/06/ChMkKmCLoiCIfM1lAAJzTI6rbcYAAODwwAt08EAAnNk044.jpg"
            />
            <View className="absolute top-0 bottom-0 left-0 right-0 flex flex-col">
              <View className="absolute w-full h-full bg-black opacity-30" />
              <Text className="relative text-xl font-bold text-white px-4 pt-2">
                分类宝宝总动员
              </Text>
              <View className="relative px-4 pb-2 space-x-2 whitespace-nowrap">
                <AtTag size="small">休闲</AtTag>
              </View>
            </View>
          </View>
          <View className="mt-2 mx-2 p-2 rounded-lg bg-background">
            <Text className="text-xs opacity-70">
              融合策略防御、城市建设和资源管理，打破传统塔防游戏框架，带来全新体验
            </Text>
          </View>
          <View className="px-4 py-2 flex gap-2 text-xs opacity-90">
            <Text className="pr-4 text-xs">空缺岗位</Text>
            <View className="flex-1" />
            <Text>已立项</Text>
            <Text>团队规模 7/10</Text>
          </View>
          <View className="overflow-x-auto max-w-full">
            <View className="px-4 space-x-2 whitespace-nowrap">
              <AtTag size="small" active>
                程序 * 1
              </AtTag>
              <AtTag size="small" active>
                美术 * 2
              </AtTag>
            </View>
          </View>
          <View className="flex items-center h-12 gap-4 px-4 py-2">
            <AtAvatar circle className="!w-6 !h-6" />
            <View className="flex flex-col justify-between py-1">
              <Text className="text-xs font-bold">混吃不等死的菜鸡</Text>
              <Text className="text-xs opacity-70">策划</Text>
            </View>
            <View className="flex-1" />
            <View className="flex flex-col h-full justify-end">
              <View className="flex items-center gap-1">
                <AtIcon
                  prefixClass="fa"
                  value="map-marker"
                  size={13}
                  className="opacity-70"
                />
                <Text className="text-xs opacity-70">成都</Text>
              </View>
            </View>
          </View>
        </AtCard>
      </View>
      <View className="space-y-4 before:content-[''] before:block before:pt-4">
        <AtCard>
          <View className="relative h-16">
            <Image
              className="w-full h-full"
              mode="aspectFill"
              src="https://xiazai-fd.zol-img.com.cn/g6/M00/0C/06/ChMkKmCLoiCIfM1lAAJzTI6rbcYAAODwwAt08EAAnNk044.jpg"
            />
            <View className="absolute top-0 bottom-0 left-0 right-0 flex flex-col">
              <View className="absolute w-full h-full bg-black opacity-30" />
              <Text className="relative text-xl font-bold text-white px-4 pt-2">
                分类宝宝总动员
              </Text>
              <View className="relative px-4 pb-2 space-x-2 whitespace-nowrap">
                <AtTag size="small">休闲</AtTag>
              </View>
            </View>
          </View>
          <View className="mt-2 mx-2 p-2 rounded-lg bg-background">
            <Text className="text-xs opacity-70">
              融合策略防御、城市建设和资源管理，打破传统塔防游戏框架，带来全新体验
            </Text>
          </View>
          <View className="px-4 py-2 flex gap-2 text-xs opacity-90">
            <Text className="pr-4 text-xs">空缺岗位</Text>
            <View className="flex-1" />
            <Text>已立项</Text>
            <Text>团队规模 7/10</Text>
          </View>
          <View className="overflow-x-auto max-w-full">
            <View className="px-4 space-x-2 whitespace-nowrap">
              <AtTag size="small" active>
                程序 * 1
              </AtTag>
              <AtTag size="small" active>
                美术 * 2
              </AtTag>
            </View>
          </View>
          <View className="flex items-center h-12 gap-4 px-4 py-2">
            <AtAvatar circle className="!w-6 !h-6" />
            <View className="flex flex-col justify-between py-1">
              <Text className="text-xs font-bold">混吃不等死的菜鸡</Text>
              <Text className="text-xs opacity-70">策划</Text>
            </View>
            <View className="flex-1" />
            <View className="flex flex-col h-full justify-end">
              <View className="flex items-center gap-1">
                <AtIcon
                  prefixClass="fa"
                  value="map-marker"
                  size={13}
                  className="opacity-70"
                />
                <Text className="text-xs opacity-70">成都</Text>
              </View>
            </View>
          </View>
        </AtCard>
      </View>
    </View>
  );
}
